<template>
  <el-card class="box-card" style="position: relative;">
    <!-- <el-carousel height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel> -->
    <!-- 公司通告 新闻 -->
    <div v-if="activeName!='dept'" style="color: #666;position: absolute;top: 27px;right: 10px;z-index: 6;cursor: pointer;" @click="more"> 更多>> </div>
    <el-tabs v-model="activeName" @tab-click="handleClick" >
      <el-tab-pane label="通知公告" name="first"></el-tab-pane>
      <el-tab-pane label="公司新闻" name="second"></el-tab-pane>
      <el-tab-pane label="公司证书" name="cert"></el-tab-pane>
      <el-tab-pane label="组织架构" name="dept"></el-tab-pane>
    </el-tabs>
    <template v-if="activeName == 'dept'">
      <div>
        <el-carousel height="200px" arrow="always" :autoplay="false" indicator-position="none">
          <el-carousel-item style="text-align: center" v-for="item in dict.type.sys_dept_img" :key="item">
            <ImagePreview height="200px" :src="baseUrl + item.value"></ImagePreview>
          </el-carousel-item>
        </el-carousel>
      </div>
    </template>
    <div v-if="list.length != 0" class="content">
      <div v-for="iten in list" class="item" @click="handleDetail(iten)">
        <div class="left" v-if="activeName !== 'cert'">
          {{ iten.noticeTitle || "--" }}
        </div>
        <div class="left" v-else>{{ iten.certName || "--" }}({{ iten.num }})</div>

        <div class="right" v-if="activeName !== 'cert'">
          {{ parseTime(iten.createTime, "{y}-{m}-{d}") || "--" }}
        </div>
        <div class="right" v-else>
          {{ parseTime(iten.publishDate, "{y}-{m}-{d}") || "--" }}
        </div>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
      <!--部门数据-->
      <el-table ref="userTable" height="500" :data="list" highlight-current-row
       >
        <el-table-column label="标题" align="center" prop="nickName">
          <template slot-scope="scope"  >
            <div style="cursor:pointer;" @click="handleDetail(scope.row)">
              <el-link type="primary">{{ activeName !== 'cert' ? scope.row.noticeTitle : scope.row.certName + '(' + scope.row.num + ')' }}</el-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="时间" align="center" prop="phonenumber" >
          <template slot-scope="scope">
            {{ activeName !== 'cert' ?  parseTime(scope.row.createTime, "{y}-{m}-{d}") || "--" :  parseTime(scope.row.publishDate, "{y}-{m}-{d}") || "--" }}
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getListCert" />
    </el-dialog>
    <el-empty v-if="list.length == 0" :image-size="50"></el-empty>
    <detail v-if="rowDetail.busType == 1" :detailOPen.sync="detailOPen" :rowDetail="rowDetail" @cancel="cancel"></detail>
    <detailNotice v-if="rowDetail.busType == 2" :detailOPen.sync="detailOPen" :rowDetail="rowDetail" @cancel="cancel">
    </detailNotice>
    <detailCertificate v-if="rowDetail.certId" :open.sync="detailOPen" :formData="rowDetail" disabled @cancel="cancel">
    </detailCertificate>
  </el-card>
</template>
<script>
import { listNotice } from "@/api/system/notice";
import { certList } from "@/api/company/cert.js";
import detail from "@/views/company/news/detail.vue";
import detailNotice from "@/views/company/news/detail.vue";
import detailCertificate from "@/views/company/certificate/detail.vue";

export default {
  name: "leftOne",
  components: {
    detail,
    detailNotice,
    detailCertificate,
  },
  dicts: ["sys_dept_img"],
  data() {
    return {
      activeName: "first",
      open:false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        busType: 2,
        status: 1,
        isShow: 1,
        orderBy: 2,
        ipAddress:this.$VUE_APP_IMG_API
      },
      title:'',
      list: [],
      total: '',
      detailOPen: false,
      rowDetail: {},
      baseUrl: this.$VUE_APP_IMG_API,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    cancel() {
      this.detailOPen = false;
    },
    more(){
      this.open = true
      this.title = this.activeName == "first"? '通知公告' : this.activeName == "second"? '公司新闻' : this.activeName == "cert"?'公司证书':'组织架构';
    },
    handleClick(e) {
      if (this.activeName == "first") {
        this.queryParams.busType = 2;
        this.getList();
      } else if (this.activeName == "second") {
        this.queryParams.busType = 1;
        this.getList();
      } else if (this.activeName == "cert") {
        this.getListCert();
      }
    },
    getListCert() {
      this.loading = true;
      certList(this.queryParams).then((response) => {
        this.list = response.rows;
        this.total = response.total
      });
    },
    handleDetail(e) {
      console.log(e, '/////');
      if (e.certId) {
        this.$nextTick(() => {
          if (e.certImage == null) {
            this.$message.error('此证书暂无附件或图片！')
          } else {
            window.open(this.baseUrl + e.certImage)
          }
        });
      } else {
        this.$nextTick(() => {
          this.detailOPen = true;
          this.rowDetail = e;
        });
      }

      // if (e.busType == 2) {
      //   this.detailOPen = true;
      //   this.rowDetail = e;
      //   // this.$router.push("/company/notice?id=" + e.noticeId);
      // } else if (e.busType == 1) {
      //   this.detailOPen = true;
      //   this.rowDetail = e;
      //   // this.$router.push("/company/index?id=" + e.noticeId);
      // } else if (e.certId) {

      //   // this.$router.push("/setup/certificate?id=" + e.certId);
      // }
    },

    /** 查询公告列表 */
    getList() {
      listNotice(this.queryParams).then((response) => {
        this.list = response.rows;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.box-card {
  height: 250px;
}

.content {
  width: 100%;
  height: 100%;
  overflow: auto;
  /* 添加滚动条 */
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 5px;
  cursor: pointer;
  width: 100%;
  /* 内容宽度与容器宽度一致 */
  height: 100%;

  /* 假定内容很长 */
  &:not(:last-child) {
    border-bottom: 1px solid #dfe4ed;
  }

  &:last-child {
    padding-bottom: 0;
    // border-bottom: 1px solid #dfe4ed;
  }

  >.left {
    max-width: 270px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}</style>
